import { onMounted, reactive, ref, unref } from 'vue';
//!!hook 就是把数据 和修改数据的方法封装一下 并且暴露出去
//!!并且数据 是要响应式的 这样才能调用的时候响应
import api from '@/api'
export default function useList() {
  //维护列表数据
  let list = ref([]);
  let loading = ref(false);
  let pageSize = ref(5);
  let page = ref(1);
  let finished = ref(false)

  let getList = () => {
    api.goodsList({ page: unref(page), pageSize: unref(pageSize) }).then((res) => {
      //返回数据
      const records = res.data?.result ?? [];
      //总条数
      const total = res.data?.totalRow ?? 0;

      list.value = unref(page) === 1 ? unref(records) : [...unref(list), ...records]
      loading.value = false; //加载完成
      finished.value = unref(list).length >= total
    })
  }
  //上啦加载
  let onPageLoad = () => {
    if (unref(finished)) {
      return;
    }

    page.value += 1;
    getList();
  }
  return {
    list, pageSize, page, finished, loading, getList, onPageLoad
  }
}
